<template>
    <div style="width: 100%;height:100%; overflow: hidden;" @dblclick="click">
        <vue-aliplayer-v2 @ready="ready" v-if="!String.isEmptyOrNUll(options.playauth)" id="vue-aliplayer-v2"
            ref="player" :options="options" @timeupdate="timeupdate1" @ended="ended" @play='playEvent' />
        <img v-else src="/static/img/skin.jpg" width="100%" height="100%">
    </div>
</template>

<script>
    // import VueAliplayer from 'vue-aliplayer'
    // import VueAliplayerV2 from 'vue-aliplayer-v2';
    var _this;
    export default {
        name: 'player',
        data() {
            return {
                'cTime': '0',
                isready: false,
                options: { //配置项
                    height: '100%',
                    width: '100%',
                    useH5Prism: true,
                    vid: "",
                    playauth: "",
                    autoplay: 'flase',
                    "skinLayout": [{
                            "name": "bigPlayButton",
                            "align": "blabs",
                            "x": 30,
                            "y": 80
                        },
                        {
                            "name": "H5Loading",
                            "align": "cc"
                        },
                        {
                            "name": "tooltip",
                            "align": "blabs",
                            "x": 0,
                            "y": 56
                        },
                        {
                            "name": "controlBar",
                            "align": "blabs",
                            "x": 0,
                            "y": 0,
                            "children": [{
                                    "name": "playButton",
                                    "align": "tl",
                                    "x": 15,
                                    "y": 12
                                },
                                {
                                    "name": "timeDisplay",
                                    "align": "tl",
                                    "x": 10,
                                    "y": 5
                                },
                                {
                                    "name": "fullScreenButton",
                                    "align": "tr",
                                    "x": 10,
                                    "y": 12
                                },
                                {
                                    "name": "volume",
                                    "align": "tr",
                                    "x": 5,
                                    "y": 12
                                },
                                // {
                                //     "name": "progress",
                                //     "align": "blabs",
                                //     "x": 0,
                                //     "y": 44
                                // }
                            ]
                        }
                    ]

                },
            }
        },
        props: ["timeupdate", "ended", 'step', 'playEvent'],
        created: function() {
            _this = this;
        },
        mounted: function() {},
        destroyed: function() {
            var player = this.$refs.player;
            if (player) {
                player.dispose();
            }

        },
        methods: {
            goback: function() {
                _this.$router.push({
                    path: "/home"
                });
            },
            ready: function() {
                if (this.seek != undefined) {
                    var player = this.$refs.player;
                    player.seek(this.seek);
                    player.pause();
                    this.isready = true;
                }
            },
            replayByVidAndPlayAuth: function(vid, playauth, playTime) {
                this.options.vid = vid;
                this.options.playauth = playauth;
                this.seek = playTime;
                var player = this.$refs.player;
                if (player) {
                    player.replayByVidAndPlayAuth(vid, playauth);
                }
            },
            play: function() {
                var player = this.$refs.player;
                if (player) {
                    player.play();
                }
            },
            pause: function() {
                var player = this.$refs.player;
                if (player) {
                    player.pause();
                }
            },
            getDuration: function() {
                var player = this.$refs.player;
                if (player) {
                    return player.getDuration();
                }
                return 0;
            },

            timeupdate1: function(e) {
                var player = this.$refs.player;
                this.cTime = parseInt(player.getCurrentTime());
            },
            getCurrentTime: function() {
                var player = this.$refs.player;
                if (player == undefined) return 0;
                return parseInt(player.getCurrentTime());
            },
            requestFullScreen: function() {
                var player = this.$refs.player;
                player.requestFullScreen();
            },
            click: function() {
                var player = this.$refs.player;
                if (player == undefined) return;
                var bl = player.getIsFullScreen();
                if (!bl) {
                    this.requestFullScreen();
                } else {
                    player.cancelFullScreen();
                }
            }
        },
        watch: {
            cTime: function(n, o) {
                n = parseInt(n + 1);
                if (this.timeupdate == undefined) return;
                this.step = this.step == undefined ? 1 : parseInt(this.step);
                if (n < this.step) return;
                if (n % this.step > 0) return;
                return this.timeupdate(n);
            }
        }
    }
</script>

<style>
    .prism-player .prism-thumbnail {
        width: auto !important;
    }

    .prism-player .prism-info-display {
        padding: 10px 0 !important;
    }
</style>
